<template>
  <div class="person">
    <div class="person-head">
      <img src="@/assets/images/person/person_bg.png" alt="" class="head-bg" />
      <div class="head">
        <img
          src="@/assets/images/person/person_logo.png"
          alt=""
          class="head-portrait"
        />
        <div class="head-information">
          <div class="head-name">{{ information.nickName }}</div>
          <div class="head-number">
            {{ $t("person.number") }}:{{ information.userId }}
          </div>
          <!-- <div class='head-percent'>
                    <div class='line'>
                        <div class='circle'></div>
                    </div>
                    <div class='num'>{{information.percent}}/1</div>
                  </div> -->
        </div>
      </div>
    </div>
    <div class="person-list">
      <van-cell-group border="false">
        <van-cell
          is-link
          v-for="item in list"
          :key="item.key"
          :border="item.border"
          @click="onjump(item)"
        >
          <template #title>
            <img :src="item.url" alt="" />
            <span class="custom-title">{{ item.title }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <content ref="contentRef" />
    <van-button round type="primary" class="person-btn" @click="onOut" v-if="isNotLogin">{{
      $t("person.loginOut")
    }}</van-button>
  </div>
</template>
<script setup>
import content from "./content.vue";
import informationImg from "@/assets/images/person/informationImg.png";
import identityImg from "@/assets/images/person/identity.png";
import invitationImg from "@/assets/images/person/invitation.png";
import teamImg from "@/assets/images/person/team.png";
import evaluateImg from "@/assets/images/person/evaluate.png";
import languageImg from "@/assets/images/person/languageImg.png";
import helpImg from "@/assets/images/person/help.png";
import contactImg from "@/assets/images/person/contact.png";
import { ref, reactive } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";
import { getUserInfo } from "@/api/user";
const { t } = useI18n();
const router = useRouter();
const list = [
  {
    url: informationImg,
    title: t("person.information"),
    path: "/information",
    border: false,
    value: 1,
  },
  {
    url: identityImg,
    title: t("person.identity"),
    path: "/identity",
    border: false,
    value: 2,
  },
  {
    url: invitationImg,
    title: t("person.invitation"),
    path: "/invitation",
    border: false,
    value: 3,
  },
  {
    url: teamImg,
    title: t("person.team"),
    path: "/team",
    border: true,
    value: 4,
  },
  // {
  //   url: evaluateImg,
  //   title: t("person.evaluate"),
  //   path: "/home",
  //   border: false,
  //   value: 5,
  // },
  {
    url: helpImg,
    title: t("person.help"),
    path: "/help",
    border: false,
    value: 6,
  },
  {
    url: contactImg,
    title: t("person.contact"),
    path: "/home",
    border: false,
    value: 7,
  },
  {
    url: languageImg,
    title: t("person.language"),
    path: "/setlanguage",
    border: false,
    value: 8,
  },
];
var isNotLogin=ref(true)
const contentRef = ref(null);
let information = reactive({
  nickName: "",
  whatsapp: "",
  percent: 1,
});
onMounted(async () => {
console.log(Boolean(sessionStorage.getItem('_token')),'token!!!!!')
    if(Boolean(sessionStorage.getItem('_token'))){
      console.log(233223)
      try { let res = await getUserInfo();
    console.log(res.data);
    Object.assign(information, res.data);
    localStorage.setItem("user", JSON.stringify(res.data));
  } catch (err) {
    console.log(err);
  }
  isNotLogin.value=true
    }else{
      isNotLogin.value=false
    }
   
  console.log(4444);
});
//点击列表跳转
function onjump(item) {
  if (item.value == 7) {
    console.log(contentRef.value);
    contentRef.value.onKnow();
  } else if(!isNotLogin.value && (item.value !== 6 && item.value !== 8)){
    router.replace({
      path: '/login'
    });
  }else {
    router.push({
      path: item.path,
    });
  }
}
//返回上一级

//登出
function onOut() {
  localStorage.removeItem("user");
  sessionStorage.clear("token");
  router.push({
    path: "/login",
  });
}
</script>
<style lang="less">
.person {
  &-head {
    position: relative;
    margin-bottom: 51px;
    .head {
      position: relative;
      padding-left: 39px;
      display: flex;
      padding-top: 60px;
      &-name {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        line-height: 16px;
        margin-bottom: 8px;
        margin-top:12px;
      }
      &-portrait {
        height: 56px;
        width: 56px;
      }
      &-information {
        margin-left: 10px;
      }
      &-number {
        font-size: 13px;
        // font-weight: bold;
        color: #ffffff;
        line-height: 13px;
        margin-bottom: 9px;
      }
      &-percent {
        display: flex;
        .line {
          flex: 1;
          height: 2px;
          background: #ffffff;
          position: relative;
          width: 101px;
        }
        .circle {
          top: -3px;
          position: absolute;
          width: 8px;
          height: 8px;
          background: #ed008c;
          border-radius: 50%;
        }
        .num {
          font-size: 13px;
          font-family: PingFang SC;
          color: #ffffff;
          line-height: 13px;
          position: relative;
          top: -5px;
          margin-left: 4px;
        }
      }
    }

    .head-bg {
      width: 100%;
      position: absolute;
    }
  }
  &-list {
    img {
      width: 23px;
      height: 23px;
      position: relative;
      top: 5px;
      margin-right: 15px;
    }
  }
  &-btn {
    width: calc(100vw - 40px);
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 10px;
  }
}
</style>
